import React, { useEffect, useRef } from 'react'

import { NavLink, Outlet, useLocation } from "react-router";

export default function Layout({ component: Component, ...rest }) {
  const overRef = useRef(null)
  const location = useLocation();
  const previousLocation = useRef(location);
  useEffect(() => {
    // 当 location 对象变化时，这个 effect 会重新运行  
    if (location !== previousLocation.current) {
      // 路由已经变化  
      overRef.current.style.height = overRef.current.clientHeight + 'px'
      previousLocation.current = location; // 更新 ref 的值  
    }
  }, [location]);
  return (
    <div className='gd pageframe'>
      <div className='overflowauto' ref={overRef}>
        <Component {...rest} />
      </div>
      <div className='gd bottom-nav'>
        <NavLink to='/' className='gd'>
          <div className='navlink gd'>
            <div className='alift gd-icon text-center text-[14px]/[1]'>&#xe819;人生格局</div>
            {/* <div className='gd-cn text-[10px]/[1]'></div> */}
          </div>
        </NavLink>
        <NavLink to='/my' className='gd'>
          <div className='navlink gd'>
            <div className='alift gd-icon text-center text-[14px]/[1]'>&#xe658;我的</div>
            {/* <div className='gd-cn text-[10px]/[1]'></div> */}
          </div>
        </NavLink>
      </div>
    </div>
  )
}


